import React from 'react';
import { useNode } from '@craftjs/core';
import { Tabs, InputNumber, Tooltip, Radio } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import styles from './gridColWrapperSettings.less';

export default () => {
  const {
    props: { textAlign, minHeight },
    actions: { setProp },
  } = useNode((node) => ({
    props: node.data.props,
  }));

  return (
    <div className={styles.settingContainer}>
      <Tabs>
        <Tabs.TabPane key="attribute" tab="属性">
          <div className={styles.settingContainerContent}>
            <div className={styles.minHeightControl}>
              <div>
                栅格单元最小高度
                <Tooltip
                  placement="top"
                  title="栅格单元的最小高度仅在设计阶段有效，实际高度以填充组件高度为准"
                >
                  <InfoCircleOutlined className={styles.minHeightControlTooltipIcon} />
                </Tooltip>
                ：
              </div>
              <InputNumber
                size="small"
                value={minHeight}
                min={10}
                max={1000}
                placeholder={'最小高度'}
                onChange={(v) => {
                  setProp((props) => (props.minHeight = v), 500);
                }}
              />
            </div>
            <div className={styles.textAlignControl}>
              <div>内容水平布局：</div>
              <Radio.Group
                value={textAlign}
                options={[
                  { label: '靠左', value: 'left' },
                  { label: '居中', value: 'center' },
                  { label: '靠右', value: 'right' },
                ]}
                onChange={(e) => {
                  setProp((props) => (props.textAlign = e.target.value), 500);
                }}
              />
            </div>
          </div>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};
